上一篇文章有提到Bootstrap格線系統的排版三劍客: container(容器)、row(橫列)、column(直行)，
今天就來介紹它們。

一、Container(容器)

在瀏覽網頁時，如果內容都直接貼齊裝置邊緣的話，會讓使用者視覺上不是那麼舒服，也有壓迫感，於是我們使用容器來為內容左右兩邊留下一些喘息空間。
容器主要的特色是:

1. 為左右留下邊距
2. 限制內容寬度
3. 容器會水平置中

在Bootstrap中容器有分兩種:

1. 滿版的Container(.container-fluid)
2. 依照斷點而有不同固定寬度的Caontainer跟(.container-斷點)

如下表格:

Container-fluid

Container-fluid的寬度幾乎貼齊瀏覽器(左右還是有一點留白)，且會依照瀏覽器的寬度彈性調整。
如果你網頁內容想做滿版或是不用太嚴謹定義最大寬度的話可以用Container-fluid。

階段性固定寬度的 Container

bootstrap的.container在瀏覽器最小寬度時預設是100%，在sm以上小於md(576px<=瀏覽器寬度<768px)，container寬會固定是540px；
在瀏覽器寬度md以上小於lg(768px<=瀏覽器寬度<992px)時container寬會固定是720px；
在瀏覽器寬度lg以上小於xl(992px<=瀏覽器寬度<1200px)時container寬會固定是960px；
在瀏覽器寬度xl以上小於xxl(1200px<=瀏覽器寬度<1400px)時container寬會固定是1140px；
在瀏覽器寬度大於xxl(1400px<=瀏覽器寬度)時container寬會固定是1320px。

如果你寫的是.container-斷點，則是在瀏覽器寬度小於等於指定斷點情況下都是滿版寬度width: 100%。
例如你寫.container-lg，那就是lg以下container寬度都是滿版，lg以上才是依斷點階段性固定寬度(如.container)。

可以看以下範例 CodePen，可以自己縮放視窗玩玩看比較好理解。

P.S. 在Bootstrap格線系統中不管有幾層一定至少要加一個container(Container-fluid或階段性固定寬度的 Container都行)，否則它會出現水平卷軸。

二、Row 與 Column

在格線系統中，Row為一行，Column為一直列(也可說是一欄)。兩兩Column之間的空隙gutter是由每個Column的padding形成的。雖然Columns之間需要有間距，但不希望第一個Column和最後一個Column與容器的邊緣有間距，於是在 Bootstrap 中，.row 元素有左右的負數 margin，移除掉第一個左邊 padding 和最後一個元素右邊 padding，使整個row與容器是貼齊的 。這就是Rows 有負數 margin 的原因。

關於.row 元素有左右的負數 margin原理: 這意味著 .row 的外邊距（margin）會超出容器邊界。
當將 margin 設置為正值時，它會在元素周圍創建一個空白的區域，從而將元素與其他元素分隔開來。
然而，當 margin 設置為負數值時，它會使元素的邊界延伸到元素周圍的區域，從而將元素與其周圍的元素重疊或合併。負數 margin 可以用來調整元素之間的位置，或者用來實現一些特定的佈局效果。

那麼下一篇講格線系統的使用方法，敬請期待囉!